<template>
    <div class="fallwave">
        <div class="model1">
            <!-- <hight-charts ref="fall" type="fall" :sensorInfo="sensorInfo" /> -->
            <div class="fall" ref="fall"></div>
        </div>
        <div class="model2">
            <hight-charts ref="fre" type="fre" :sensorInfo="sensorInfo" />
        </div>
    </div>
</template>

<script>
import { deepClone } from '@/plugins/clone'
import hightCharts from './hightCharts'
import * as echarts from 'echarts'
export default {
    data() {
        return {
            myChart: null,
        }
    },
    props: {
        mulChart: {
            type: Array,
            default: []
        },
        sensorInfo: {
            type: Object,
            default: null
        }
    },
    methods: {
        //画单独的频谱图
        drawSingle(options) {
            this.$refs.fre.updateChart(options)
        },

        draw3d(seriesData, options) {
            seriesData = deepClone(seriesData)
            seriesData.forEach(e => {
                let { name } = e;
                e.data.forEach((arr, index) => {
                    // 在原数组中直接修改元素
                    e.data[index] = [arr[0], name, ...arr.slice(1)]
                })
            })
            options.series = seriesData
            let ref = this.$refs.fall
            this.myChart = echarts.init(ref)
            if (this.myChart) {
                this.myChart.clear();
                ref.removeAttribute('_echarts_instance_')
            }
            if (seriesData.length == 0) {
                this.myChart.dispose();
                this.$refs.fre.clearChart()
                return
            }
            this.myChart.setOption(options)
            window.addEventListener('resize', () => {
                this.myChart.resize()
            })
        },
        clearEcharts() {
            if (this.myChart)
                this.myChart.dispose()
        }
    },
    components: {
        hightCharts
    }
}
</script>

<style lang="less" scoped>
.fallwave {
    width: 100%;
    height: 100%;

    model2{
        width: 1px;
        height: 1px;
    }
    .model1 {
        width: 100%;
        height: 100%;

        .fall {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
